<template>
	<div>
		<view class="fixed header">
			<view class="gap" style="height: 190rpx;background: white;">
				<SearchBar placeholder="请输入商品名称" @search="(val)=>{}"></SearchBar>

				<e-tabs :list="[{name:'全部'},{name:'申请中'},{name:'申请失败'},{name:'寄售中'},{name:'已上架'},{name:'申请退回'}]" lineColor="red"
				:itemStyle="{height:'60rpx','margin-bottom':'10rpx'}"
					lineHeight="4rpx" @change="(e)=>{
						console.log(e)
					}"></e-tabs>
			</view>
		</view>
		<view class="gap" style="height: 190rpx;"></view>
		<view class="">
			<view class="e-p-20">
				<view class="app-leaks__item bg-white e-radius-20 e-m-b-20 e-p-20" v-for="(item,index) in list"
					:key="item.id" @tap="handleShow(item)">
					<view class="e-flex-x">
						<image src="/src/pages/bargain/static/temp/cover.png" mode="aspectFit" class="cover"></image>
						<view class="e-flex-1 e-p-l-30">
							<view class="e-m-b-10 title">云炉紫砂壶</view>
							<view class="e-flex-x " style="align-items: center;">
								<view class="e-flex-1">
									<text class="gray">申请时间</text>
									<text class="time">20250304</text>
								</view>
								<view>
									<text class="status">寄售成功</text>
								</view>
							</view>
						</view>
					</view>

					<view class="extra e-m-t-20">
						<view class="e-flex-y" style="align-items:center;justify-content: center;">
							<text class="gray">购买价格</text>
							<text class="num">22998.98</text>
						</view>
						<view class="e-flex-y" style="align-items:center;justify-content: center;">
							<text class="gray">寄售价格</text>
							<text class="num">2398.98</text>
						</view>
						<view class="e-flex-y" style="align-items:center;justify-content: center;">
							<text class="gray">寄售数量</text>
							<text class="num">2</text>
						</view>
						<view class="e-flex-y" style="align-items:center;justify-content: center;">
							<text class="gray">剩余数量</text>
							<text class="num">1</text>
						</view>
					</view>


					<view class="alert e-m-t-20">
						<text>拒绝寄售原因：因为商品价格错误，请修改后重新申请</text>
					</view>

					<view class="actions-bar e-m-t-20">
						<button class="e-reset-button">退回</button>
						<button class="e-reset-button">上架</button>
						<button class="e-reset-button">下架</button>
					</view>
				</view>
				<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" show v-if="list.length === 0">
				</empty>
				<load-more v-else :showLoad="showLoad"></load-more>
			</view>
		</view>
	</div>
</template>

<script setup>
	import SearchBar from '../components/search-bar.vue';
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue';
	import {
		swCustomerList
	} from '@/common/request/api'
	import {
		useCurrentInstance,
		useI18n,
		useQueryPage
	} from '@/common/hooks';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';

	const toI18 = useI18n('public')

	const getlist = () => new Promise((resolve) => {
		resolve({
			code: 200,
			data: {
				rows: [{}, {}, {}]
			}
		})
	})


	const {
		showLoad,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getlist,
		option: {
			responseKey: 'data.rows'
		},
	});


	onReachBottom(() => {
		handleQueryPage()
	})

	onLoad(() => {
		handleRefresh()
	})
</script>

<style lang="scss" scoped>
	.scroll-view-box {
		height: 100vh;
	}

	.sticky-sw-list-title {
		position: sticky;
		top: 0;
		padding: 30rpx;
		background: #f7f7f7;
		z-index: 999
	}
</style>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
	}

	.header {
		left: 0;
		top: 0;
		width: 100%;
	}

	.cover {
		width: 90rpx;
		height: 90rpx;
		border-radius: 10rpx;
	}

	.extra {
		width: 670rpx;
		height: 116rpx;
		background: #F7F7F7;
		border-radius: 20rpx;

		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.alert {
		background: rgba(228, 66, 59, 0.05);
		border-radius: 20rpx;
		padding: 20rpx;


		text {
			height: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #E4423B;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.title {
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.gray {
		height: 34rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
	}

	.time {
		height: 34rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.status {
		height: 34rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #E4423B;
		line-height: 34rpx;
		text-align: center;
		font-style: normal;
	}

	.actions-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
</style>